<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>邀您加入俱乐部: ${crowd.crowdName}(${crowd.id}) 快快加入一起来玩游戏吧！</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/wechat/jquery-1.11.2.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/common/common.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/layerui/layer.min.js"></script>
    	<script type="text/javascript" src="${pageContext.request.contextPath}/js/layerui/layer.ext.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <!-- Add your keywords and description here for SEO. -->
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style type="text/css">
        	.weui-footer_fixed-bottom{position: inherit}
			.weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
			.weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}
			.weixin-tip1{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
			.weixin-tip1 p{text-align: center; margin-top: 10%; padding:0 5%;}
			.imghedden {
			    max-width: 100%;
			    height: auto;
			}
			 .layui-layer {
				 width: 80%; 
				/* top: 50% !important; */
				left: 10% !important;
				transform: translateX(-50%) !important;
				-webkit-transform: translateX(-50%) !important;
			}
        	
        	
            html {
                font-size: 10px
            }

            @media screen and (min-width:321px) and (max-width:375px) {
                html {
                    font-size: 12px
                }
            }

            @media screen and (min-width:376px) and (max-width:414px) {
                html {
                    font-size: 14px
                }
            }

            @media screen and (min-width:415px) and (max-width:639px) {
                html {
                    font-size: 15px
                }
            }

            @media screen and (min-width:640px) and (max-width:719px) {
                html {
                    font-size: 20px
                }
            }

            @media screen and (min-width:720px) and (max-width:749px) {
                html {
                    font-size: 22.5px
                }
            }

            @media screen and (min-width:750px) and (max-width:799px) {
                html {
                    font-size: 23.5px
                }
            }

            @media screen and (min-width:800px) {
                html {
                    font-size: 25px
                }
            }

            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }

            * {
                margin: 0;
                padding: 0;
            }

            .global-bg {
                width: 100%;
                height: 100%;
                background-image: url(${pageContext.request.contextPath}/images/crowd/bg.jpg);
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                -webkit-background-size: cover;
            }

            .top-wrapper {
                position: absolute;
                left: 50%;
                top: 2rem;
                width: 22rem;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                color: #ffffff;
                text-align: center;
            }

            .top-wrapper .logo {
                width: 5rem;
                height: 5rem;
                margin: 0 auto;
                /** background: #46589a; **/
                border-radius: 5px;
            }

            .top-wrapper .inviter {
                margin-top: 1rem;
                font-size: 1.8rem;
            }

            .top-wrapper fieldset {
                margin-top: 1rem;
                padding: 10px;
                border-radius: 5px;
                font-size: 1.6rem;
                border: 2px solid #ffffff
            }

            .top-wrapper fieldset legend {
                font-size: 1.8rem;
            }

            .top-wrapper .info-txt {
                line-height: 2.5rem;
                text-align: left;
            }

            .bottom-wrapper {
                position: absolute;
                left: 0;
                bottom: 2rem;
                width: 100%;
            }

            .bottom-wrapper .btn {
                display: block;
                width: 16rem;
                height: 7.8rem;
                margin: 0 auto;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: contain;
                -webkit-background-size: contain;
            }

            .bottom-wrapper .onekey-btn {
                background-image: url(${pageContext.request.contextPath}/images/crowd/onekey.png);
            }

            .bottom-wrapper .download-btn {
                background-image: url(${pageContext.request.contextPath}/images/crowd/download.png);
            }
            
            
            
        </style>
    </head>

    <body>
    
    <!-- 隐藏图 -->
	<div class="weixin-tip" onclick="hide()">
			<p>
				<img class="imghedden" src="${pageContext.request.contextPath}/images/youle/live_weixin.png" alt="微信打开">
			</p>
	</div>
    
    <div class="weixin-tip1" onclick="hide()">
			<p>
				<img class="imghedden" src="${pageContext.request.contextPath}/images/crowd/live_weixin.png" alt="微信打开">
			</p>
	</div>
    
        <div class="global-bg"></div>
        <div class="top-wrapper">
            <!-- <div class="logo"> </div> -->
            <div class="basic-info">
                <div class="inviter">邀请人：${userCrowd.outUserName}</div>
                <fieldset>
                    <legend>&nbsp;俱乐部信息&nbsp;</legend>
                    <div class="info-txt">俱乐部名称：${crowd.crowdName}</div>
                    <div class="info-txt">俱乐部 ID：${crowd.id}</div>
                </fieldset>
            </div>
        </div>
        <div class="bottom-wrapper">
            <a href="javascript:apply();" class="btn onekey-btn"></a>
            <a href="javascript:downloads(this,'1');" onclick="downloads(this,'1');" class="btn download-btn"></a>
        </div>
    </body>
    <script>
    var winHeight = $(window).height();
    var isWeixin = is_weixin();
  	if(isWeixin&&${invite}){
  		
  		$(".weixin-tip1").css("height",winHeight);
        $(".weixin-tip1").show();
  	}
    
    
	var weixin = false;
    var isIos = false;
    function downloads(me,status){
	    var winHeight = $(window).height();
		var isWeixin = is_weixin();
		if(isWeixin){
			$(".weixin-tip").css("height",winHeight);
	        $(".weixin-tip").show();
	        return;
		}
	    var iosUrl = "itms-services://?action=download-manifest&url=https://czhy.youlehuyu.cn/app/ios.plist";
		var Url2 = "/../app/xianleqipai.apk ";
        var url = isIos? iosUrl : Url2;
        if(weixin){
          //return;
        }
        window.location.href = url;
    }
    
    function is_weixin() {
	    var ua = navigator.userAgent.toLowerCase();
	    if (ua.match(/MicroMessenger/i) == "micromessenger") {
	        return true;
	    } else {
	        return false;
	    }
	}
    
    function hide(){
    	$(".weixin-tip").hide();
    	$(".weixin-tip1").hide();
    }
    
    $(function () {
    	var ua = navigator.userAgent.toLowerCase();
	    if (ua.match(/MicroMessenger/i) == "micromessenger") {
	        //return true;
	    } else {
	    	$("#isweixinDiv").css("display", "none");  
	    	$("#isweixinDiv").css("display", "none");  
	    }
    	
        weixin = ZCKJ.isWeixin();
        isIos = ZCKJ.isIos();
        var str = '<span class="mmico">&#xe6a2</span>下载';
        if(isIos)str = '<span class="mmico">&#xe64a</span>下载';
        $('#games .weui-btn').each(function () {
            $(this).html(str);
        })
    });
    
    function apply(){
    	var isWeixin = is_weixin();
    	if(!isWeixin){
    		layer.alert(" 请在微信端申请~ ");
    		return;
        }
    	$.post("${pageContext.request.contextPath}/wechat/crowd_find_save.html",
    	        {"crowdId":'${crowd.id}',"remark":""},
    	  function(data){
                	var json = eval("("+data+")");
    				if(json.statusCode =='200'){
    					layer.alert(json.msg);
    				}else{
    					layer.alert("系统错误，请稍后再试~");
    				}
    	  });
    }
    
    
</script>

</html>
